import { markRaw } from 'vue'
import { Document } from '@element-plus/icons-vue'
import { ComponentType, ComponentCategory } from '../../../types/component'
import type { ComponentRegister } from '../../index'
import InputComponent from './index.vue'

const config: Omit<ComponentRegister, 'component'> = {
    type: ComponentType.FORM_INPUT,
    category: ComponentCategory.FORM,
    label: '输入框',
    icon: markRaw(Document),
    props: {
        base: {
            label: '输入框',
            placeholder: '请输入',
            defaultValue: '',
            required: false,
            disabled: false,
            clearable: true,
            'show-password': false,
            size: 'default'
        },
        style: {
            width: '100%',
            maxWidth: '500px',
            labelWidth: '100px'
        },
        baseSchema: {
            label: { type: 'string', label: '标签文本' },
            placeholder: { type: 'string', label: '占位文本' },
            defaultValue: { type: 'string', label: '默认值' },
            required: { type: 'boolean', label: '是否必填' },
            disabled: { type: 'boolean', label: '是否禁用' },
            clearable: { type: 'boolean', label: '是否可清空' },
            'show-password': { type: 'boolean', label: '是否密码框' },
            size: { 
                type: 'select', 
                label: '尺寸', 
                options: [
                    { label: '默认', value: 'default' },
                    { label: '大号', value: 'large' },
                    { label: '小号', value: 'small' }
                ]
            }
        },
        styleSchema: {
            width: { type: 'string', label: '组件宽度' },
            maxWidth: { type: 'string', label: '最大宽度' },
            labelWidth: { type: 'string', label: '标签宽度' }
        }
    }
}

const fullConfig: ComponentRegister = {
    ...config,
    component: markRaw(InputComponent)
}

export default fullConfig 